<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>用户注册</h1>
		
		<form action="注册成功.html" onsubmit="return check();">
			用户名:<input type="text" id="username"  onfocus="txtFocus()" onblur="txtBlur()" onchange="user()"/><br />
			密码:<input type="password" id="userpassword1"   onfocus="txtFocus()" onblur="txtBlur()"/><br />
			重复密码:<input type="password" id="userpassword2"  onfocus="txtFocus()" onblur="txtBlur()" /><br />
			邮箱:<input type="text" id="email"   onfocus="txtFocus()" onblur="txtBlur()"/><br />
			电话:<input type="text" id="tel"   onfocus="txtFocus()" onblur="txtBlur()"/><br />
            生日:<input id="bir" type="text" name="bir"  onfocus="txtFocus()" onblur="txtBlur()"/> <br />
			<input type="submit" value="注册"  onfocus="txtFocus()" onblur="txtBlur()" onsubmit="check()"/>
			<input type="reset" value="重置"  onfocus="txtFocus()" onblur="txtBlur()"/>
			
		</form>
		
		<script type="text/javascript">
            function txtFocus() {
				console.log("获得焦点");
				event.target.style.background = "#ffff66";
			}

			function txtBlur() {
				console.log("失去焦点");
				event.target.style.background = "#ffffff";
			}

            function user(){
                if(username.value.length>=4){

                }
                else{
                    alert("不符合");
                }
            }

            tel.onkeydown=function(e){
                if(e.keyCode>=48&&e.keyCode<=57){

                }
                else{
                    console.log("不是数字");
                    event.preventDefault();
                }
            }

			function check()
			{
				if(username.value == null || username.value.length<1)
				{
					alert("用户名不能为空");
					return false;
				}
				var re1 = /^[a-z][a-z0-9]{5,19}$/;
                var re2 = /[A-Za-z0-9]{5,19}$/;
                var re3 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
                var re4 = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                var re5 = /^20\d{2}-\d{1,2}-\d{1,2}$/;
				if(username.value.match(re1))
				{
                    console.log("用户名符合要求");
				}
				else
				{
					console.log("用户名不符合要求");
                    return false;
				}


                if(password1.value.match(re2))
				{
                    console.log("密码符合要求");
				}
				else
				{
					console.log("密码不符合要求");
                    return false;
				}


                if(email.value.match(re3))
				{
                    console.log("邮箱符合要求");
				}
				else
				{
					console.log("邮箱不符合要求");
                    return false;
				}


                if(tel.value.match(re4))
				{
                    console.log("电话号码符合要求");
				}
				else
				{
					console.log("电话号码不符合要求");
                    return false;
				}


                if(bir.value.match(re5))
				{
                    console.log("生日符合要求");
				}
				else
				{
					console.log("生日不符合要求");
                    return false;
				}
				// 判断密码
				
				// 判断邮箱
				
				// 判断电话
				
				return true;
			}


            // 练习 编写一个完整的用户注册页面
        // 1. 包含以下字段: 用户名 密码 重复密码 性别 邮箱 电话号码 出生年月日
        // 2. 给所有输入框添加onfoucs onblur事件  获得焦点时输入框背景颜色变深 失去焦点背景变白
        // 3. 给用户名输入框添加onchange事件  判断用户名是否长度大于4，不符合用alert提示用户
        // 4. 给电话号码输入框添加onkeydown事件 阻止用户输入数字以外内容
        // 5. 给表单添加onsubmit事件 判断所有内容是否符合要求才能提交（可以使用之前学习的正则来判断)
        // *6. 给性别添加onchange事件 如果是男性显示一个男性的图片 女性显示一个女性的图片
		</script>
	</body>
</html>




